<template>
  <span class="input">
    <el-input
      v-model="modelValue"
      :placeholder="props.placeholder"
      :disabled="disabled"
      :size="props.size"
      :clearable="props.clearable"
      @input="handleInput"
      @blur="handleBlur"
    ></el-input>
  </span>
</template>

<script setup>
const emit = defineEmits(['change', 'blur']);
const modelValue = defineModel();
const props = defineProps({
  placeholder: String,
  disabled: Boolean,
  size: String,
  clearable: Boolean
});

const handleInput = (val) => {
  emit('change', val);
};

const handleBlur = (event) => {
  emit('blur', event);
};
</script>

<style scoped>
.input {
  width: 100%;
}
</style>